<template>
    <div class>
       <el-card class="btns">
            <el-button size="medium" type="primary"  @click="save">保存</el-button>
            <el-button size="medium"   @click="back">返回</el-button>
        </el-card>
       <el-table :data="tableData" border style="width: 100%">
            <el-table-column  align="center" width="50" fixed>
              <template slot="header" >
               <el-button size="mini" class="el-icon-circle-plus" type="text" @click.prevent="addRow()"></el-button>
              </template>
              <template slot-scope="scope">
                <el-button size="mini" type="text" class="el-icon-remove"
                @click="handleDelete(scope.$index, scope.row)"></el-button>
            </template>
            </el-table-column>
            <el-table-column
              type="index"
              width="50" label="NO.">
            </el-table-column>
            <el-table-column label="人员" align="center" >
                <template slot-scope="scope">
                  <!-- <el-input v-model=""></el-input> -->
                  <el-select  size="mini" v-model="scope.row.userId" @change="selectUserChange(scope.$index,scope.row.userId)" placeholder="请选择">
                        <el-option
                        
                          v-for="item in users"
                          :key="item.id"
                          :label="item.realName"
                          :value="item.id">
                        </el-option>
                   </el-select> 
                </template>
              </el-table-column>
              <el-table-column label="人员所属部门编码" align="center"  v-if="false">
                <template slot-scope="scope">
                        <el-input v-model="scope.row.organId"  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="人员所属部门" align="center" >
                    <template slot-scope="scope">
                            <el-input v-model="scope.row.organName" clearable size="mini" disabled></el-input>
                    </template>
            </el-table-column>
            <el-table-column label="备注" align="center"  fixed="right">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remark" clearable size="mini"></el-input>
              </template>
            </el-table-column>
          </el-table>
    </div>
  </template>
  
  <script>
  export default {
    components: {},
    data() {
      return {
        dutyId:'',//职务id
        tableData: [

        ],
        users:[],
      };
    },
    computed: {},
    mounted() {
       this.dutyId= this.$route.query.dutyId;
       this.init();
       this.getusers();
    //    this.getGlbOptions(); 
    },
    methods: {
        init(){
            //通过id查询人员表
            this.$api
                .formPost( "/api/auth/sysDutyUser/doGetList",{
                    dutyId:this.dutyId
                }).then(res=>{
                if (res.retHead.code == "0000000") {
                    this.tableData = res.retBody.list;
                }else {
                        this.$message({
                        message: "查询失败！",
                        type: "error"
                        });
                    }
                });
        },
        selectUserChange(index,userId){
           //选择用户，给机构选择框赋值
           this.$api
                .formPost( "/api/auth/sysorgan/getOrganByUserId",{
                    userId:userId
                }).then(res=>{
                if (res.retHead.code == "0000000") {
                    if(res.retBody.organName){
                      this.tableData[index].organName = res.retBody.organName;
                    }
                   if(res.retBody.id){
                    this.tableData[index].organId=res.retBody.id;
                   }
                }else {
                        this.$message({
                        message: "查询失败！",
                        type: "error"
                        });
                    }
                });
        },
        getusers() {
              let params = {};
              this.$api
                .formPost(  "/api/auth/sysuser/doGetList", params)
                .then(res => {
                  if (res.retHead.code == "0000000") {
                    this.users = res.retBody.list;
                  }
                });
            },
        back(){
            this.$router.push('/auth/dutyList');
        },
        save(){
            // let user=JSON.parse(sessionStorage.getItem("user"));

            let params={
                sysDutyUser:this.tableData,
                dutyId:this.dutyId
            }
            
            this.$api
                .post(  "/api/auth/sysDutyUser/doSaveList", params)
                .then(res => {
                  if (res.retHead.code == "0000000") {
                    this.$message({
                        message: "保存成功！",
                        type: "success"
                        });
                  }else{
                    this.$message({
                        message: res.retHead.message,
                        type: "error"
                        });
                  }
                });
        },
        getdata(){
            return this.tableData;
        },
        // 增加行
        addRow() {
            var list = {
                userName:'',
                organName:'',
                remark:'',
            }
            this.tableData.unshift(list);
        },
        handleDelete(index, row) {
             //删除数据库
              if(row.id){
                this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                    //删除
                    this.$api.formPost( '/api/auth/sysDutyUser/doRmById',{
                      id:row.id
                      }).then(res => {
                          if(res.retHead.code=="0000000"){
                                this.$message({
                                  type: 'success',
                                  message: '删除成功!'
                                });
                                this.tableData.splice(index, 1);
                            }else{
                                this.$message({
                                    type: 'error',
                                    message: res.retHead.message
                                });
                            }
                      });
                  }).catch(() => {
                    this.$message({
                      type: 'info',
                      message: '已取消删除'
                    });          
                  });
              }else{
                this.tableData.splice(index, 1);
              }
          }
    },
    created() {}
  };
  </script>
  <style lang='scss' scoped>
  .btns {
        text-align: right;
      }
  </style>